<template>
  <div class="home">
    <div class="phone_header">
      <phonenav :backcolor="backcolor" :type="type" />
    </div>
    <div class="homer">
      <Ha class="a" style="padding: 30px" />
      <div class="shbanner">
        <div class="shflex a">
          <img src="../assets/image/shop/header.png" alt="" />

          <div class="phonedaohang" @click="flag = !flag">
            <span></span><span></span><span></span>
          </div>
        </div>
        <div class="shbzhanshi">
          <div class="shbtitle">
            <b>大智商城小程序三大服务模式</b>
            <p>助力每个商家获客盈收</p>
          </div>
          <img
            class="shbzhanshiimg"
            src="../assets/image/shop/licon1.png"
            alt=""
          />
        </div>
      </div>

      <div class="shop_h_bai">
        <span class="shop_h_bp">
          不可错过小程序的微信生态 <span>新</span> 红利聚集地
        </span>
        <span class="shop_h_bp2">流量红利助你轻松获客、裂变、复购</span>
        <div class="shop_h_btedian">
          <div class="sp_kuang">
            <div class="sh_quan">
              <img src="../assets/image/shop/icon2_c.png" alt="" />
            </div>
            <span class="sh_title2">自带营销加速流量裂变</span>
            <span class="sh_title"
              >公众号、小程序、微信群互联互通，流量变现快速高效</span
            >
          </div>
          <div class="sp_kuang">
            <div class="sh_quan">
              <img src="../assets/image/shop/licon3.png" alt="" />
            </div>
            <span class="sh_title2">更佳体验提升付费转化</span>
            <span class="sh_title"
              >产品体验比H5更流畅，极大程度 降低转化损耗</span
            >
          </div>
          <div class="sp_kuang">
            <div class="sh_quan">
              <img src="../assets/image/shop/licon4.png" alt="" />
            </div>
            <span class="sh_title2">随处可见的入口实现快速获客</span>
            <span class="sh_title"
              >微信首页任务栏等6大小程序专属入口让10亿用户轻松发现你</span
            >
          </div>
        </div>
      </div>

      <div class="shbanners">
        <div class="shb_text">
          <p>我们选择企业时会有那些困扰</p>
          <div class="sh_textarea">
            <span>或许费用太高，价格和做出来的效果不成正比</span>
            <span>不够灵活，想要的功能，确价格太高。</span>
            <span
              >功能缺阀裂变,售后服务不及时，开发周期过长，小程序体验效果不佳，等等因素</span
            >
          </div>
        </div>
      </div>

      <div class="shyoushi">
        <div class="sh_yhkuang">
          <div class="sh_yhtitle"><span>优势</span>已核心价值</div>
          <div class="sh_yhzflex">
            <div class="sh_yhlist">
              <img src="../assets/image/shop/licon5.png" alt="" />
              <span class="sh_yhfspan">我们提供了不同服务的合伙模式</span>
              <div class="sh_yhflex">
                <span class="sh_liquan"></span>
                <span class="sh_span"
                  >合伙共赢，押金4000 可退，无风险，限期暂无。</span
                >
              </div>
              <div class="sh_yhflex">
                <span class="sh_liquan"></span>
                <span class="sh_span">标准版，5800一年(限定功能)</span>
              </div>
              <div class="sh_yhflex">
                <span class="sh_liquan"></span>
                <span class="sh_span">定制开发，售后服务期限一年</span>
              </div>
            </div>
            <div class="sh_yhlist">
              <img src="../assets/image/shop/licon6.png" alt="" />
              <span class="sh_yhfspan"
                >我们会根据市场情况不断更新最前沿的活动功能，</span
              >
              <div class="sh_yhflex">
                <span class="sh_liquan"></span>
                <span class="sh_span">让商家的货卖的更好！</span>
              </div>
              <div class="sh_yhflex">
                <span class="sh_liquan"></span>
                <span class="sh_span">为您打造一个即时服务售后技术团队</span>
              </div>
            </div>
            <div class="sh_yhlist">
              <img src="../assets/image/shop/licon7.png" alt="" />
              <span class="sh_yhfspan">我们提供了不同服务的合伙模式</span>
              <div class="sh_yhflex">
                <span class="sh_liquan"></span>
                <span class="sh_span"
                  >合伙共赢，押金4000 可退，无风险，限期暂无。</span
                >
              </div>
              <div class="sh_yhflex">
                <span class="sh_liquan"></span>
                <span class="sh_span">标准版，5800一年(限定功能)</span>
              </div>
              <div class="sh_yhflex">
                <span class="sh_liquan"></span>
                <span class="sh_span">定制开发，售后服务期限一年</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <transition name="fade" v-if="flag">
        <div class="nav">
          <ul>
            <li>首页</li>
            <li>关于我们</li>
            <li>商城小程序</li>
            <li>生鲜小程序</li>
            <li>案例展示</li>
            <li>服务项目</li>
            <li>联系我们</li>
          </ul>
        </div>
      </transition>
    </div>
    <!-- 第一部分 -->
    <div class="shop_m_one">
      <!-- 内容 -->
      <div
        class="shop_m_t_warp"
        v-for="(top, index) in shopMidTopcont"
        :key="index"
      >
        <div class="shop_m_t_con">
          <img :src="top.img" alt="" />
          <span>{{ top.text1 }}</span>
          <p>解决方案</p>
          <hr />
          <p v-html="top.text2"></p>
        </div>
      </div>
    </div>
    <!-- 第二部分 -->
    <div class="shop_m_two">
      <h2><span>小程序</span>功能清单</h2>
      <div class="shop_m_w_con">
        <div
          class="shop_w_list"
          v-for="(list, key) in shopMidTwocont"
          :key="key"
        >
          <!-- 头部 -->
          <div class="shop_w_l_top">
            <div>
              <span>{{ list.text }}</span>
            </div>
          </div>
          <!-- 内容 -->
          <div class="shop_w_l_con">
            <div
              class="shop_w_c_list"
              v-for="(ltext, key) in list.text1"
              :key="key"
            >
              <span></span>
              <div>{{ ltext }}</div>
            </div>
            <div>更多....</div>
          </div>
        </div>
      </div>
      <h3>更多详情功能清单可来电话资讯</h3>
      <p class="shop_m_w_mid">
        <img src="@/assets/image/shop/dianhua.png" alt="" height="80%" />
        400-161-2889
      </p>
    </div>
    <!-- 第三部分 -->
    <div class="shop_m_three">
      <h2><span>小程序</span>功能清单</h2>
      <div class="shop_m_t_con">
        <!-- 列表 -->
        <div
          class="shop_m_t_list"
          v-for="(ltext, key) in shopMidThreecont"
          :key="key"
        >
          <div class="shop_m_t_l_top">
            <div class="shop_m_l_t_con">
              <span>合作共赢</span>
              <div>
                <img
                  src="@/assets/image/shop/xing.png"
                  alt=""
                  height="15px"
                  width="15px"
                  v-for="(item, index) in ltext.num"
                  :key="index"
                />
              </div>
            </div>
          </div>
          <h2>
            {{ ltext.text1 }}
          </h2>
          <h3 v-for="(item, index) in ltext.text2" :key="index">
            <b>{{ index + 1 }}</b>
            <span>{{ item }}</span>
          </h3>
        </div>
      </div>
      <!-- 底部 -->
      <h3>更多详情功能清单可来电话资讯</h3>
      <p class="shop_m_w_mid">
        <img src="@/assets/image/shop/dianhua.png" alt="" height="100%" />
        400-161-2889
      </p>
    </div>
    <!-- 第四部分 -->
    <div class="shop_m_four">
      <h2><span>案例</span>介绍-界面</h2>
      <div class="shop_m_f_con">
        <div
          class="shop_m_f_list"
          v-for="(list, key) in shopMidFourcont"
          :key="key"
        >
          <img :src="list.img" height="90%" />
          <p>{{ list.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Ha from "../components/Topnav.vue";
import phonenav from "../components/Phone_nav.vue";
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      flag: false,
      backcolor: "shop/bj_c.jpg",
      type: "image",
      // 第一部分的数组
      shopMidTopcont: [
        {
          img: require("../assets/image/shop/tu1.png"),
          text1: "费用太高",
          text2:
            "<p>我们推出三种合作方式<br/>合作共赢，交押金即可开发您的小程序，押金可退<br/>购买使用标准版<br/>定制开发</p>",
        },
        {
          img: require("../assets/image/shop/tu2.png"),
          text1: "加新功能才生费用",
          text2:
            "<p>我们推出三种合作方式<br/>合作共赢，交押金即可开发您的小程序，押金可退<br/>购买使用标准版<br/>定制开发</p>",
        },
        {
          img: require("../assets/image/shop/tu3.png"),
          text1: "小程序效果不理想",
          text2:
            "<p>在小程序内部，我们设置了很多用户操作的轨迹，我们会定期对小程序轨迹进行数据分析，和商家反馈，结合实际需求，优化，完善程序。让商家通过小程序可以把产品销售的更好，为商家获客盈收</p>",
        },
      ],
      // 第二部分的数组
      shopMidTwocont: [
        {
          text: "分享裂变",
          text1: ["拼团", "分销", "抽奖", "生成海报", "分享有佣金"],
        },
        {
          text: "分享裂变",
          text1: ["抢购", "满减券", "无门槛券", "余额支付", "购物车"],
        },
        {
          text: "页面装修",
          text1: ["轮播图", "图片", "单页管理", "广告管理", "主题页"],
        },
        {
          text: "管理员操作",
          text1: [
            "小程序完成发货",
            "会员管理",
            "产品管理",
            "提成管理",
            "合伙人管理",
          ],
        },
      ],
      // 第三部分的数组
      shopMidThreecont: [
        {
          text: "合作共赢",
          num: 5,
          text1:
            "什么是合伙共赢，一起合作，商家使用我们开发的商城小程序，技术我们维护和更新开发功能，每成交一笔计算提成，具体规则如下",
          text2: [
            "交付 4000押金，合作佣金达5000提成点后，4000将退还给商家",
            "每月小于5000返点 每单返点提成5% 5000-10000 每单返点提成4%",
            "更新功能，或新加功无费用，更新功能具体按照商家见意和用户体验数据，由平台具体开发新功能",
            "使用时间暂无期限",
          ],
        },
        {
          text: "旗舰版商城",
          num: 3,
          text1:
            "标准版商城，包含功能，拼团，分销，优惠券，提现，余额支付，产品管理，抽奖，分享佣金，会员管理，合伙人管理等功能。",
          text2: [
            "价格：6800，使用期一年",
            "售后服务一年，如有BUG无条件处理。",
            "无提成返点，无更新，如需更新加功能需支付1000元。",
          ],
        },
        {
          text: "合作共赢",
          num: 5,
          text1:
            "什么是合伙共赢，一起合作，商家使用我们开发的商城小程序，技术我们维护和更新开发功能，每成交一笔计算提成，具体规则如下",
          text2: [
            "售后服务一年，如有BUG无条件处理，如有新加功能可沟通协商。",
            "包含功能，拼团，分销，优惠券，提现，分享佣金合伙人管理等功能,具体可恰谈沟通",
          ],
        },
      ],
      // 第四部分的数组
      shopMidFourcont: [
        {
          text: "拼团",
          img: require("../assets/image/shop/tu4.png"),
        },
        {
          text: "产品详情",
          img: require("../assets/image/shop/tu5.png"),
        },
        {
          text: "我的",
          img: require("../assets/image/shop/tu6.png"),
        },
        {
          text: "商家管理中心",
          img: require("../assets/image/shop/tu7.png"),
        },
      ],
    };
  },
  components: {
    Ha,
    phonenav,
  },
};
</script>
<style lang="less" scoped>
.home {
  .phone_header {
    width: 100%;
    display: none;
  }
  .homer {
    //  z-index:1 ;
    width: 100%;
    height: auto;
    // max-width: 5000px;
    // min-width: 1024px;
    background: url("../assets/image/shop/bj_c.jpg") no-repeat;
    background-size: 100%;
  }
  // overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  // 1
  .shop_m_one {
    width: 100%;
    height: 580px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    div {
      width: 33.33%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      .shop_m_t_con {
        width: 75%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: auto;
        hr {
          width: 100%;
          // height: 1px;
        }
        img {
          margin-bottom: 15px;
          width: 100px;
          height: 100px;
        }
        p {
          line-height: 25px;
          color: white;
        }
        span {
          color: white;
          font-size: 22px;
          font-weight: bold;
        }
      }
    }
    .shop_m_t_warp {
      background: #05a7bc;
    }
    .shop_m_t_warp:first-child {
      background: #00b050;
    }
    .shop_m_t_warp:last-child {
      background: #212121;
    }
  }
  // 2
  .shop_m_two {
    width: 100%;
    height: 680px;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    background: #f4f4f4;
    h2 {
      margin-top: 60px;
      padding: 0;
      span {
        color: #00b050;
      }
    }
    .shop_m_w_con {
      width: 72%;
      height: 430px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      // border: 1px solid red;
      align-items: center;
      justify-content: space-between;
      .shop_w_list:nth-child(2) {
        .shop_w_l_top {
          background: -webkit-gradient(
            linear,
            0% 0%,
            0% 100%,
            from(#e4871b),
            to(#c77617)
          );
        }
        .shop_w_l_con {
          .shop_w_c_list {
            span {
              background: #da811a;
            }
          }
        }
        background: #fff3e5;
      }
      .shop_w_list:nth-child(3) {
        background: #e7f4ff;
        .shop_w_l_con {
          .shop_w_c_list {
            span {
              background: #238ee8;
            }
          }
        }
        .shop_w_l_top {
          background: -webkit-gradient(
            linear,
            0% 0%,
            0% 100%,
            from(#1473c3),
            to(#1779cb)
          );
        }
      }
      .shop_w_list:nth-child(4) {
        background: #ffe5ef;
        .shop_w_l_con {
          .shop_w_c_list {
            span {
              background: #f92680;
            }
          }
        }
        .shop_w_l_top {
          background: -webkit-gradient(
            linear,
            0% 0%,
            0% 100%,
            from(#f30a5a),
            to(#fa2a86)
          );
        }
      }
      .shop_w_list {
        width: 22%;
        height: 380px;
        background: #d9feda;
        // border: 1px solid pink;
        color: #666666;
        font-size: 16px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        flex-direction: column;

        .shop_w_l_top {
          width: 100%;
          height: 50px;
          border-radius: 15px 15px 0 0;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          background: -webkit-gradient(
            linear,
            0% 0%,
            0% 100%,
            from(#029f4a),
            to(#08c960)
          );
          font-size: 18px;
          font-weight: bold;
          div {
            width: 75%;
            height: 100%;
            color: white;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            // border: 1px solid red;
            align-items: center;
            span {
              display: flex;
              // border: 1px solid black;
              justify-content: flex-start;
            }
          }
        }
        .shop_w_l_con {
          width: 75%;
          height: 70%;
          //  border: 1px solid red;
          margin-bottom: 15px;
          .shop_w_c_list {
            width: 100%;
            height: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            color: #666666;
            span {
              width: 10px;
              height: 10px;
              background: #0eb012;
              margin-right: 8px;
              border-radius: 50px;
            }
          }
        }
      }
    }
    .shop_m_w_mid {
      img {
        margin-right: 8px;
      }
      width: 300px;
      height: 40px;
      background: #00b050;
      border-radius: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      color: white;
      font-size: 16px;
      font-weight: bolder;
      justify-content: center;
    }
  }
  // 3
  .shop_m_three {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    width: 100%;
    height: 750px;
    background: #e9e9e9;
    h2 {
      margin-top: 60px;
      padding: 0;
      span {
        color: #00b050;
      }
    }
    .shop_m_t_con {
      // border: 1px solid red;
      width: 72%;
      height: 500px;
      // background: white;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .shop_m_t_list:nth-child(2) {
        .shop_m_t_l_top {
          background: #116ebc;
        }
        h3 {
          b {
            background: #116ebc;
          }
        }
      }
      .shop_m_t_list:nth-child(3) {
        .shop_m_t_l_top {
          background: #c77617;
        }
        h3 {
          b {
            background: #c77617;
          }
        }
      }
      .shop_m_t_list {
        width: 32%;
        height: 100%;
        background: white;
        display: flex;
        align-items: center;
        flex-direction: column;
        border-radius: 15px;

        .shop_m_t_l_top {
          width: 100%;
          height: 55px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 15px 15px 0 0;
          background: #00b050;
          .shop_m_l_t_con {
            width: 75%;
            height: 100%;
            // border: 1px sienna solid;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            span {
              color: white;
              font-weight: bold;
              font-size: 20px;
            }
            div {
              width: 100%;
              height: 15px;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              img {
                margin-right: 5px;
              }
            }
          }
        }
        h2 {
          width: 75%;
          font-size: 14px;
          color: #666666;
          font-size: 14px;
          font-weight: 200;
          margin-top: 25px;
          border-bottom: #666666 1px solid;
          padding-bottom: 25px;
        }
        h3 {
          width: 75%;
          height: auto;
          margin: 5px 0;
          padding: 5px 0;
          // border: 1px solid red;
          display: flex;
          flex-direction: row;
          // border: 1px solid rebeccapurple;
          justify-content: flex-start;
          align-items: center;
          b {
            width: 20px;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 20px;
            color: white;
            background: #22a524;
            border-radius: 50px;
            margin-right: 8px;
          }
          span {
            width: 90%;
            display: flex;
            font-size: 14px;
            color: #666;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
            font-weight: 100;
          }
          // div{
          //   font-size: 12px;
          //   color: #666;
          //   font-weight: 200;
          // }
        }
      }
    }
    .shop_m_w_mid {
      img {
        margin-right: 8px;
      }
      width: 300px;
      height: 40px;
      background: #00b050;
      border-radius: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      color: white;
      font-size: 16px;
      font-weight: bolder;
      justify-content: center;
    }
  }
  //4
  .shop_m_four {
    display: flex;
    //  min-width: 100;
    flex-direction: column;
    width: 75%;
    align-items: center;
    height: auto;
    // border: 1px solid red;
    align-items: flex-start;
    h2 {
      span {
        color: #20ba66;
      }
    }
    .shop_m_f_con {
      flex-wrap: wrap;
      // border: 1px solid rebeccapurple;
      display: flex;
      flex-direction: row;
      // align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 550px;
      .shop_m_f_list {
        // border: 1px solid red;
        // min-width: 180px;
        width: 24%;
        height: 500px;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

@media screen and (max-width: 1025px) {
  .shbanner {
    display: none;
  }
  .home {
    width: 100%;
    overflow: hidden;
    height: auto;
    .homer {
      background: none;
    }
    .phone_header {
      display: block;
    }
    // 第一部分
    .shop_m_one {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      height: auto;
      .shop_m_t_warp {
        width: 100%;
        height: 350px;
        .shop_m_t_con {
          padding-top: 40px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          height: auto;
          hr {
            width: 100%;
            // height: 1px;
          }
          img {
            margin-bottom: 15px;
            width: 50px;
            height: 50px;
          }
          p {
            line-height: 25px;
            color: white;
          }
          span {
            color: white;
            font-size: 22px;
            font-weight: bold;
          }
        }
      }
    }
    // 第二部分
    .shop_m_two {
      h2 {
        font-size: 20px;
        margin-bottom: 25px;
      }
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
      .shop_m_w_con {
        width: 90%;
        height: auto;
        // border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .shop_w_list {
          font-size: 12px;
          width: 47%;
          height: 280px;
          margin-bottom: 25px;
          // border: 1px sienna solid;
          .shop_w_l_con {
            .shop_w_c_list {
              height: 38px;
              font-size: 12px;
            }
          }
        }
      }
    }
    // 第三部分
    .shop_m_three {
      h2 {
        font-size: 20px;
      }
      h3 {
        font-size: 15px;
        font-weight: bold;
        margin: 0;
      }
      // .shop_m_t_con{
      //   width: ;
      // }
      .shop_m_w_mid {
        width: 55%;
        img {
          height: 90%;
        }
      }
      display: flex;
      height: auto;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      .shop_m_t_con {
        width: 90%;
        height: auto;
        display: flex;
        flex-direction: column;
        .shop_m_t_list {
          width: 100%;
          height: 450px;
          margin-bottom: 45px;
        }
      }
    }
    // 第四
    .shop_m_four {
      align-items: center;
      display: flex;
      width: 100%;
      height: auto;
      h2 {
        margin-bottom: 35px;
        font-size: 20px;
      }
      .shop_m_f_con {
        width: 90%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        // 竖向排版
        flex-direction: column;
        align-items: center;
        // 纵向排版
        // flex-direction: row;
        // justify-content: space-between;
        .shop_m_f_list {
          // 竖向
          width: 90%;
          // 纵向
          // width: 47%;
          img {
            width: 70%;
          }
          p {
            font-size: 20px;
          }
          margin-bottom: 22px;
        }
      }
    }
  }
}
@media only screen and (min-width: 1024px) {
    .sh_yhlist {
    display: flex;
    height: 400px;
    color: #767676;
    flex-direction: column;
    /* border: 1px solid rebeccapurple; */
    width: 33%;
    height: auto;
  }
  .shb_text {
    margin: 0;
    margin-left: 550px;
    //  position: absolute;
    //  left: 200px;
  }
  .sh_textarea span {
    font-size: 10px;
  }
  .sh_textarea {
    display: flex;
    flex-direction: column;
  }
  .shb_text p {
    font-size: 20px;
    padding-top: 15 0px;
    font-weight: bold;
  }
  .shb_text {
    width: 50%;
    height: 50%;
    // border: 1px solid red;
    // float: right;
    // padding-right: 100px;
    // margin-top: 20px;
  }
  .shbanners {
    // border: 5px solid rebeccapurple;
    background: url("../assets/image/shop/bj_b.jpg") no-repeat;
    /* margin-bottom: 35px; */
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    // min-width: 750px;
    color: white;
    border: 0;
    margin: 0;
    margin-bottom: 40px;
    background-size: 100%;
  }
  .sh_top_img {
    width: 280px;
    height: 190px;
  }
  .sh_yhzflex {
    display: flex;
    /* border: 1px solid rebeccapurple; */
    justify-content: center;
  }
  .sh_yhflex {
    display: flex;
  }
  .sh_span {
    display: block;
  }
  .sh_yhfspan {
    margin-left: 14px;
  }
  .sh_liquan {
    width: 5px;
    display: block;
    height: 5px;
    background: #21b123;
    border-radius: 50%;
    margin-top: 4px;
    margin-right: 8px;
    float: left;
  }
  .sh_yhlist span {
    font-size: 8px;
  }
  .sh_yhlist img {
    padding-left: 15px;
    width: 260px;
    text-align: center;
    height: 250px;
  }
  .sh_yhlist {
    display: flex;
    height: 400px;
    margin-left: 40px;
    color: #767676;
    flex-direction: column;
    /* border: 1px solid rebeccapurple; */
    width: 33%;
    height: auto;
  }
  .sh_yhkuang {
    width: 1024px;
    /* border: 1px solid rebeccapurple; */
    height: 100%;
    padding-bottom: 40px;
    margin: 0 auto;
  }
  .sh_yhtitle span {
    color: #00b050;
    font-size: 25px;
  }
  .sh_yhtitle {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: bold;
    color: black;
    font-size: 25px;
  }
  .shyoushi {
    width: 100%;
    min-width: 750px;
    height: auto;
    /* margin-top: 35px; */
    background: #f4f4f4;
  }
  .sh_title2 {
    white-space: nowrap;
    padding-top: 10px;
    color: #00b050;
    font-weight: bold;
  }
  .sh_title {
    font-size: 7.5px;
    padding-top: 5px;
  }
  .sp_kuang {
    width: 33%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sh_quan {
    width: 100px;
    height: 100px;
    box-shadow: -2px 1px 8px 0px #ccc;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
  }
  .shop_h_btedian {
    width: 1024px;
    display: flex;
    margin: 35px auto 0;
  }
  .shop_h_bp2 {
    color: darkgrey;
    font-size: 14px;
    padding-top: 7px;
  }
  .shop_h_bp span {
    color: #00b050;
    font-size: 30px;
    font-weight: bold;
  }
  .shop_h_bp {
    font-size: 20px;
    padding-top: 35px;
  }
  .shop_h_bai {
    width: 100%;
    text-align: center;
    display: flex;
    min-width: 750px;
    flex-direction: column;
    margin-top: 35px;
    margin-bottom: 35px;
    color: black;
    height: 400px;
    background-color: #f4f4f4;
    height: auto;
    /* border: 1px solid rebeccapurple; */
  }
  .shbtitle {
    color: white;
  }
  .shbtitle b {
    font-size: 30px;
  }
  .shbanner p {
    font-size: 18px;
    padding-top: 5px;
  }
  .phonedaohang {
    display: none;
  }
  .shflex {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    display: none;
  }
  .shbzhanshiimg {
    width: 500px;
    height: 350px;
  }
  .shbzhanshi {
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 800px;
    margin: 0 auto;
  }
  .homer {
    //  z-index:1 ;
    width: 100%;
    height: auto;
    // max-width: 5000px;
    // min-width: 1024px;
    // background: url("../assets/image/shop/bj_c.jpg");
  }
  .shflex img {
    width: 350px;
    height: 80px;
  }
  .shbanner {
    width: 95%;
    padding-top: 20px;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }
  .shbanner ul {
    display: flex;
    font-size: 19px;
  }
  .shbanner ul li {
    list-style: none;
    padding-left: 10px;
    color: white;
    white-space: nowrap;
  }
}

@media only screen and (max-width: 1024px) {
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .nav {
    display: flex;
    left: 0;
    width: 50%;
    height: 200px;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .nav ul {
    margin: 0;
    width: 100%;
    height: 100%;
    flex-direction: row;
    display: flex;
    padding-left: 15px;
    align-items: flex-start;
    flex-direction: column;
  }
  .nav ul li {
    display: flex;
    // border: 1px solid red;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    list-style: none;
    color: white;
  }

  .shbanner{
    display: none;
  }
.shbanners{
    display: none;
  }
  .sh_top_img {
    width: 280px;
    height: 190px;
  }
  .sh_yhzflex {
    display: flex;
    /* border: 1px solid rebeccapurple; */
    flex-direction: column;
  }
  .sh_yhflex {
    display: flex;
  }
  .sh_span {
    display: block;
  }
  .sh_yhfspan {
    margin-left: 14px;
  }
  .sh_liquan {
    width: 5px;
    display: block;
    height: 5px;
    background: #21b123;
    border-radius: 50%;
    margin-top: 4px;
    margin-right: 8px;
    float: left;
  }
  .sh_yhlist span {
    font-size: 15px;
  }
  .sh_yhlist img {
    padding-left: 15px;
    width: 260px;
    text-align: center;
    height: 250px;
  }
  .sh_yhlist {
    display: flex;
    height: 400px;
    color: #767676;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border: 1px solid rebeccapurple; */
    width: 100%;
  }
  .sh_yhkuang {
    /* border: 1px solid rebeccapurple; */
    height: 100%;
    padding-bottom: 40px;
    margin: 0 auto;
  }
  .sh_yhtitle span {
    color: #00b050;
    font-size: 25px;
  }
  .sh_yhtitle {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: bold;
    color: black;
    font-size: 25px;
  }
  .shyoushi {
    width: 100%;
    height: auto;
    /* margin-top: 35px; */
    background: #f4f4f4;
  }

  .shop_h_bp span {
    color: #00b050;
    font-size: 30px;
    font-weight: bold;
  }
  .shop_h_bp2 {
    color: #ccc;
  }
  .shop_h_bp {
    font-size: 19px;
    padding-top: 20px;
  }
  .shop_h_bai {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 10px;
    color: black;
    background-color: #f4f4f4;
    /* border: 1px solid rebeccapurple; */
  }

  .sh_quan {
    width: 80px;
    height: 80px;
    box-shadow: -2px 1px 8px 0px #ccc;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
  }
  .sh_title2 {
    white-space: nowrap;
    padding-top: 10px;
    color: #00b050;
    font-weight: bold;
  }
  .sp_kuang {
    display: flex;
    width: 95%;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 20px;
    justify-content: center;
  }
  .shop_h_btedian {
    display: flex;
    width: 100%;
    color: black;
    flex-wrap: wrap;
  }
  .shbzhanshi {
    display: none;
  }
  .a {
    display: none;
  }
  .shflex {
    justify-content: space-between;
    width: 95%;
    margin: 0 auto;
    align-items: center;
    height: 100%;
    display: flex;
  }
  .shflex img {
    width: 150px;
    height: 30px;
  }
  .shbanner {
    width: 100%;
    height: 50px;
    // background: url("../assets/image/shop/bj_c.jpg");
    // border: 1px solid red;
  }
  .shbzhanshiimg {
    display: none;
  }
  .phonedaohang span {
    display: block;
    width: 90%;
    height: 1px;
    background: #ccc;
  }
  .phonedaohang {
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 15px;
    border: 1px solid #ccc;
  }
}
</style>
